<template>
  <div class="nav">
    <div class="navBox">
      <div class="topNav">
        <div class="titleBox"><span>数据查询</span></div>
        <div class="titleContent">
          <ul>
            <li @click.stop="toReagentQuire"><i>&#xe606;</i><span>试剂查询</span></li>
            <li @click.stop="toInstrumentQuire"><i>&#xe615;</i><span>维护查询</span></li>
            <li @click.stop="toFaultQuire"><i>&#xe600;</i><span>故障查询</span></li>
            <li @click.stop="toInStrumentState"><i>&#xe634;</i><span>仪器状态</span></li>
          </ul>
        </div>
      </div>
      <div class="bottomNav">
        <div class="topNav">
          <div class="titleBox"><span>设置</span></div>
          <div class="titleContent">
            <ul>
              <li @click.stop="toUsersetting"><i>&#xe6b9;</i><span>用户设置</span></li>
              <li @click.stop="toInstrumentSetting"><i>&#xe64a;</i><span>仪器设置</span></li>
              <li @click.stop="toRegionSetting"><i>&#xe642;</i><span>大区设置</span></li>
              <li @click.stop="toHospitalSetting"><i>&#xe687;</i><span>医院设置</span></li>
              <li @click.stop="toFaultSetting"><i>&#xe63f;</i><span>故障设置</span></li>
              <li @click.stop="toInstrumentType"><i>&#xe609;</i><span>仪器类型</span></li>
            </ul>
          </div>
        </div>
      </div>

    </div>
    <div class="contentBox">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    toReagentQuire() {
      console.log("点击了");
      this.$router.push("/tellgen/datacenter/reagentquire");
    },
    toInstrumentQuire() {
      this.$router.push("/tellgen/datacenter/maintainquire");
    },
    toFaultQuire() {
      this.$router.push("/tellgen/datacenter/faultquire");
    },
    toInStrumentState() {
      this.$router.push("/tellgen/datacenter/instrumentstates");
    },
    toUsersetting() {
      this.$router.push("/tellgen/datacenter/usersetting");
    },
    toInstrumentSetting() {
      this.$router.push("/tellgen/datacenter/instrumentsetting");
    },
    toRegionSetting() {
      this.$router.push("/tellgen/datacenter/regionsetting");
    },
    toHospitalSetting() {
      this.$router.push("/tellgen/datacenter/hospitalsetting");
    },
    toFaultSetting() {
      this.$router.push("/tellgen/datacenter/faultsetting");
    },
    toInstrumentType() {
      this.$router.push('/tellgen/datacenter/instrumenttype');
    }
  }
};
</script>

<style lang='scss' scoped>
@font-face {
  font-family: "iconfont"; /* Project id 2700101 */
  src: url("//at.alicdn.com/t/font_2700101_w75sinr0ab.woff2?t=1631172721826")
      format("woff2"),
    url("//at.alicdn.com/t/font_2700101_w75sinr0ab.woff?t=1631172721826")
      format("woff"),
    url("//at.alicdn.com/t/font_2700101_w75sinr0ab.ttf?t=1631172721826")
      format("truetype");
}

@mixin navBarStyle {
  .titleBox {
    width: 75%;
    height: 11rem;
    margin-left: 1.6rem;
    border-bottom: 0.2rem solid #d74f4f;
    font-size: 2.5rem;
    position: relative;
    span {
      letter-spacing: 0.4rem;
      position: absolute;
      bottom: 1.2rem;
      color: #d74f4f;
    }
  }
  .titleContent {
    width: 100%;
    ul {
      li {
        width: 90%;
        height: 6rem;
        margin: 0 auto;
        margin-top: 1rem;
        text-align: center;
        line-height: 6rem;
        font-size: 2.4rem;
        border-radius: 30rem;
        // background: #d74f4f;
        i {
          font-family: "iconfont";
          font-style: normal;
          font-size: 3rem;
          letter-spacing: 2rem;
          vertical-align: middle;
          color: #dddddd;
        }
        span {
          letter-spacing: 0.4rem;
          line-height: 6rem;
          vertical-align: middle;
          color: #dddddd;
        }
      }
      li:hover {
        background: #252548;
        i,
        span {
          color: #ff70ad;
        }
      }
    }
  }
}
.nav {
  display: flex;
  .navBox {
    flex: 1.63;
    height: 100rem;
    background: #191931;
    border: 0.1rem solid #1e1e3a;
    border-radius: 1.6rem;
    margin-left: 1.2rem;
    display: flex;
    flex-direction: column;
    .topNav {
      flex: 1;
      @include navBarStyle;
    }
    .bottomNav {
      flex: 1.3;
      // background: #583f3f;
      @include navBarStyle;
      .titleBox {
        height: 4rem;
      }
    }
  }
  .contentBox {
    flex: 10;
    height: 100rem;
    background: #191931;
    margin: 0 2rem;
    border-radius: 1.6rem;
    border: 0.1rem solid #1e1e3a;
  }
}
</style>